<!--页头-->
<template>
  <div class="ApiLog-content">
    <div class="panel-nav">
      <Button type="default" v-show="advancedSearch" icon="ios-arrow-down" shape="circle" @click="handleCommSearch" style="margin-left: 5px">{{$t('query_by_keyword')}}</Button>
      <Button type="default" v-show="!advancedSearch" icon="ios-arrow-up" shape="circle" @click="handleCommSearch" style="margin-left: 5px">{{$t('query_comp_conditional')}}</Button>
      <Button type="success" v-show="canAdd" :Title="addBtnTitle" icon="ios-add" shape="circle" @click="add" style="margin-left: 10px"></Button>
      <Button type="primary" :Title="$t('search')" icon="ios-search" shape="circle" @click="getData" style="margin-left: 10px"></Button>
      <Button type="primary" v-show="canRefresh" :Title="$t('refresh')" icon="ios-refresh" shape="circle" @click="refresh" style="margin-left: 10px"></Button>
    </div>
    <div v-show="!advancedSearch" >
      <Input clearable :placeholder="$t('keyword')" v-model="keyword"></Input>
    </div>
    <div v-show="advancedSearch" >
      <slot></slot>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    keywordValue: {type: String,default: ""},
    canAdd:{type:Boolean,default:true},
    canRefresh:{type:Boolean,default:false},
    addBtnTitle:{type:String,default:"new"}//default 不能用 $t
  },
  watch:{
    canAdd(oldVal,newVal){
      console.log("canAdd: oldVal:%o,newVal:%o",oldVal,newVal)
    }
  },
  // v-model
  model:{
    prop: 'keywordValue',
    event: "keywordChange"
  },

  data () {
    return {
      addBtnTitle1: this.$t('new'),
      keyword:'',
      advancedSearch:false
    }
  },
  methods: {
    handleCommSearch(){
      this.advancedSearch = !this.advancedSearch;
      if (this.advancedSearch){
        this.keyword=null;
      }
      /** 交给调用端去初化参数 */
      this.$emit('handleInit',null);
    },
    getData(){
      /** 调用端 v-model */
      this.$emit('keywordChange',this.keyword);
      /** 点击查询按钮 */
      this.$emit('handleSearch',this.keyword);
      ;
    },
    add(){
      /** 点击新增按钮 */
      this.$emit('handleAdd',null);
    },
    refresh(){
      /** 点击刷新按钮 */
      this.$emit('handleRefresh',null);
    }
  }
}
</script>

<style lang="less">
.ApiLog-content {
  .panel-count {
    margin-bottom: 10px;
    margin-top: 10px;
    .count-number {
      font-size: 30px;
      color: #ed4014;
    }
  }
  .panel-page {
    margin-top: 10px;
  }
  .panel-nav {
    margin-bottom: 10px;
    a {
      margin-right: 10px;
    }
  }
}
</style>
